<template>
  <el-card>
    <div class="edit">
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="add('0', 1)"
      >添加菜单</el-button>
    </div>
    <el-table :data="permissions" row-key="id">
      <el-table-column label="菜单名称" prop="name" width="250px" />
      <el-table-column label="权限标识" prop="code" width="250px" />
      <el-table-column label="描述" prop="description" width="300px" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <div>
            <el-button
              type="text"
              @click="add(row.id, 2)"
            >添加权限点</el-button>
            <el-button type="text" @click="edit(row)">查看</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <DialogItem ref="dialogItem" @getPermissions="getPermissions" />
  </el-card>
</template>

<script>
import { sysPermission, sysPermissionDel } from '@/api/permission.js'
import { changeTreeData } from '@/utils/index.js'
import DialogItem from './components/dialog-item.vue'
export default {
  name: 'Permission',
  components: {
    DialogItem
  },
  data() {
    return {
      permissions: []
    }
  },
  created() {
    this.getPermissions()
  },
  methods: {
    // 获取所有权限点
    async getPermissions() {
      const res = await sysPermission()
      this.permissions = changeTreeData(res.data, '0')
    },
    // 删除权限点
    del(id) {
      this.$confirm('您确定删除该权限点吗？', '温馨提示').then(async() => {
        await sysPermissionDel(id)
        this.$message.success('删除权限点成功')
        this.getPermissions()
      })
    },
    // 新增菜单
    add(pid, type) {
      this.$refs.dialogItem.isShow = true
      this.$refs.dialogItem.form.pid = pid
      this.$refs.dialogItem.form.type = type
    },
    // 查看点击
    edit(row) {
      this.$refs.dialogItem.isShow = true
      this.$refs.dialogItem.form = JSON.parse(JSON.stringify(row))
      this.$refs.dialogItem.mode = 'edit'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 20px;
  .edit {
    text-align: right;
  }
}
</style>
